window.addEventListener('load', function () {
    var items = this.document.querySelector('.items');
    var swipe = document.querySelector('.swipe');
    var cricle = document.querySelector('.cricle');
    var num = 0
    var timer = setInterval(function () {
        num++;
        items.style.transition = 'all .3s';
        items.style.transform = 'translateX(' + -num * swipe.offsetWidth + 'px)';

    }, 2000);
    items.addEventListener('transitionend', function () {
        if (num >= 7) {
            num = 0;
            items.style.transition = 'none';
            items.style.transform = 'translateX(' + -num * swipe.offsetWidth + 'px)';
        } else if (num < 0) {
            num = 6;
            items.style.transition = 'none';
            items.style.transform = 'translateX(' + -num * swipe.offsetWidth + 'px)';
        }
        //小圆点跟随图片移动
        cricle.querySelector('.current').classList.remove('current');
        cricle.children[num].classList.add('current');
    });
    var startX = 0;//手指按下开始的位置
    var moveX = 0;//手指移动的距离
    var flag = false;//判断手指是否移动过
    //手指滑动轮播图
    items.addEventListener('touchstart', function (e) {
        startX = e.targetTouches[0].pageX;
        clearInterval(timer);
    });
    items.addEventListener('touchmove', function (e) {
        var translateX = -num * swipe.offsetWidth + moveX;
        moveX = e.targetTouches[0].pageX - startX;
        items.style.transition = 'none';
        items.style.transform = 'translateX(' + translateX + 'px)';
        flag = true;
        e.preventDefault();//阻止滚动屏幕的行为
    });
    //手指离开 根据移动距离判断是回弹还是部分上一张或下一张
    items.addEventListener('touchend', function (e) {
        if (flag) {
            if (Math.abs(moveX) > 50) {
                if (moveX > 0) {
                    num--;

                } else {
                    num++;
                }
                var translateX = -num * swipe.offsetWidth;
                items.style.transition = 'all .3s';
                items.style.transform = 'translateX(' + translateX + 'px)';

            } else {
                var translateX = -num * swipe.offsetWidth;
                items.style.transition = 'all .1s';
                items.style.transform = 'translateX(' + translateX + 'px)';
            }

        }
        clearInterval(timer);
        timer = setInterval(function () {
            num++;
            items.style.transition = 'all .3s';
            items.style.transform = 'translateX(' + -num * swipe.offsetWidth + 'px)';

        }, 2000);

    });
});